iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0
Modern Web

從0到有做出一個商家網頁系列 第 5

Day5:賦予網頁多種色彩的工具CSS

  • 分享至 

  • xImage
  •  

在繼續編輯網頁內容之前,要先介紹賦予網頁多種色彩的工具CSS
什麼是CSS?
HTML具有「賦予字串意義」的功用。
而CSS的作用是用來「設定網頁的外觀」,例如改變文字的大小、配置等等。
CSS是「Cascading Style Sheets」(階層式樣式表)的縮寫。
「Cascading」這個字的意思是「階梯狀的瀑布」,具有「由上往下流」(繼承)的意思

接下來進入教學時間
1.首先在資料夾內新增一個檔案叫test.css,檔名可以自己改,但副檔名一定要是css
https://ithelp.ithome.com.tw/upload/images/20250807/201760521WKoVLokMa.png

2.為了要連動網頁改變我們要在編輯網頁的檔案介面裡的<head></head>,裡面加上這串程式<link rel="stylesheet" href="style.css"> ,這樣我們就可以在css的檔案裡來更改網頁的文字或圖片的樣式了
https://ithelp.ithome.com.tw/upload/images/20250807/2017605289Ct46pWb7.png

3.現在先更改背景的顏色,在css檔案中加入
@charset "utf-8";
body {background-color: bisque;}
背景就會被更改了
https://ithelp.ithome.com.tw/upload/images/20250807/20176052XFAJShIJC9.png

4.css的基本語法會包含「在哪」、「最什麼」、「怎麼做」這三個項目
在哪{ 做什麼 : 怎麼做 ;}

5.現在要將文字置中,在css檔案中指派文字標籤置中
加入h3 ,p{ text-align: center;}
https://ithelp.ithome.com.tw/upload/images/20250807/20176052dLcAHeQZih.png

今天就先做到這裡明天繼續!


上一篇
Day4:添加網頁內容物
下一篇
Day6:在網頁內嵌入影片和加入網頁圖示
系列文
從0到有做出一個商家網頁30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言